<%@page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="../global/global.jsp" %>
<%QuestionPage questionPage = new QuestionPage(request, response);%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <jsp:include page="../components/htmlHeader.jsp"></jsp:include>
    <title><testU:i18n>questionPage.title</testU:i18n></title>
    <script language="JavaScript" src="<%=cPath%>/testYou/resources/validations.js">
    </script>

    <script type="text/javascript">
        function addLocalLineEmpty() {
            addLocalLine('', false);
        }
        function addLocalLine(text, checked) {
            addLine('answersTable', 'rowID' + index, '<%=ManageQuestionServlet.INPUT_ANSW_TEXT%>' + index, '<%=ManageQuestionServlet.INPUT_ANSW_CORR%>' + index, text, checked);
            enableButton('newQuest', 'textA1', 'hintId');
            index++;
        }
        function deleteLastLine() {
            if (index > 1) {
                index--;
                removeElement('rowID' + index);
            }
            if (index <= 2) {
                $("#newQuest").attr("disabled", "disabled");
            }
        }
    </script>
</head>

<body class="bgColor textColor">
<jsp:include page="../components/header.jsp"/>
<br><br>
<%if (questionPage.hasMessage()) {%>
<center><testU:i18n><%=questionPage.getMessage()%>
</testU:i18n></center>
<%}%>
<br>

<script type="text/javascript">
    var index = 1;
</script>

<c:set var="qPage" value="<%=questionPage%>"/>
<c:set var="add" value="<%=questionPage.getOperationName()%>"/>
<form action="<%=cPath%><%=response.encodeURL(ManageQuestionServlet.URL)%>" method="post" id="newQuestionFormId"
      onsubmit="return validateAddQuestion(this, '${add}');">
    <input type="hidden" name="<%=ManageQuestionServlet.INPUT_QUESTIONID%>" value="<%=questionPage.getId()%>"/>
    <input type="hidden" id="hiddenField" value="" name="<%=ManageQuestionServlet.OPERATION%>"/>

    <table class="centerTable30marg padTop3">
        <tbody>
        <tr>
            <td>
                <label for="textA1"><testU:i18n>questionPage.questionText</testU:i18n>
                </label>
            </td>
            <td>
                <textarea name="<%=ManageQuestionServlet.INPUT_Q_TEXT%>" id="textA1" rows="5" cols="40"
                          onblur="enableButton('newQuest', 'textA1', 'hintId')"></textarea>
                <c:if test="${qPage.edit}">
                    <c:forEach var="question" items="${qPage.answers}">

                        <script type="text/javascript">
                            addLocalLine("${question.text}", "${question.id}");
                        </script>
                    </c:forEach>
                </c:if>
                <script type="text/javascript">
                    addLocalLineEmpty();
                </script>
            </td>
        </tr>
        <tr>
            <td>
                <label for="hintId"><testU:i18n>questionPage.hint</testU:i18n>
                </label>
            </td>
            <td>
                <input type="text" id="hintId" name="<%=ManageQuestionServlet.INPUT_HINT%>" value="${qPage.hint}"
                       onblur="enableButton('newQuest', 'textA1', 'hintId')"/>
            </td>
        </tr>
        </tbody>
    </table>
    <br><br>
    <table class="centerTable30marg" id="answersTable">
        <tbody>
        <tr>
            <td class="padLeft5px">
                <label><testU:i18n>questionPage.answer</testU:i18n></label>
            </td>
            <td><label><testU:i18n>questionPage.correct</testU:i18n></label>
            </td>
        </tr>
        </tbody>
    </table>

    <table class="centerTable30marg">
        <tbody>
        <tr>
            <td>
                <input type="button" value="+" onclick="addLocalLineEmpty()"/>
                <input type="button" value="-" onclick="deleteLastLine()"/>
            </td>
        </tr>
        </tbody>
    </table>

    <table class="centerTable30marg">
        <tbody>
        <tr>
            <td>
                <input class="width80px" type="button" value="<testU:i18n>button.back</testU:i18n>"
                       onclick="window.location.href='<%=cPath%>/testYou/pages/questions.jsp'"/>
            </td>
            <td>
                <c:choose>
                    <c:when test="${qPage.edit}">
                        <input class="width100" type="submit"
                               value='<testU:i18n>questionPage.edit</testU:i18n>'/>
                    </c:when>
                    <c:otherwise>
                        <input class="width100" type="submit" id="newQuest"
                               value='<testU:i18n>questionPage.new</testU:i18n>' disabled="disabled"/>
                    </c:otherwise>
                </c:choose>
            </td>
        </tr>

        </tbody>
    </table>


</form>
</body>

<script type="text/javascript">
    <%if (questionPage.isEdit()) {%>
            var textArea = document.getElementById("textA1");
            textArea.innerHTML = '<%=questionPage.getQuestionTextForEdit()%>';
            <c:forEach items = "<%=questionPage.getAnswers()%>" var ="pair">
                    addLocalLine('${pair.text}', ${pair.id});
            </c:forEach>
    <%}%>
    addLocalLineEmpty();
</script>

</html>